
<template>
  <!-- 专题报告 -->
  <div class="specialReportConain">
    <template v-if="!isShowPdf">
      <div class="specialReportSingle" v-for="product in productList" :key="product.name" @click="showPdf(product)">
        <div class="productImg"></div>
        <div class="productDetail">
          <span> {{product.name}}</span>
          <span> {{product.time}}发布</span>
        </div>
        <div class="more"></div>
      </div>
    </template>
    <template v-if="isShowPdf">
      <div class="backPdfList" @click="backPdfList()">< 返回产品列表</div>
      <div class="pdfContain">
        <pdfViewer :pdf-url="pdfpath"></pdfViewer>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()
const route = useRoute()
import { findProductListByTaskId } from '@/api/specialReport'
import pdfViewer from "@/components/pdfViewer.vue"


const productList = ref([])
const getProduct = ()=>{
  findProductListByTaskId(route.params.taskId).then((res:any)=>{
    if (res.code === 200 && res.data.length>0) {
      productList.value = res.data;
    }else{
      productList.value = [];
    }
  })
}

const isShowPdf = ref(false);
const pdfpath = ref("");
const showPdf = (product:any)=>{
  isShowPdf.value = true;
  debugger
  //pdfpath.value = "//xuzhou/proxy/product/word/pub/NJ_2023NJMLS/2024/202403/20240308/2/1.pdf";
  pdfpath.value = "/xuzhou/proxy/product/"+product.pdf_path;
}
const backPdfList = ()=>{
  isShowPdf.value = false;
}
onMounted(() => {
  getProduct();
});

onUnmounted(() => {
});
</script>
<style scoped lang="scss">
.specialReportConain{
  overflow-y: auto;
  width: 100%;
  height: 100%;
  color:#000;
  font-size: 14px;
  // padding:0px 10px;
  .pdfContain{
    width: 100%;
    height: 100%;
    // margin-top:10px;
  }
  .backPdfList{
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-size: 11px;
    color:rgba(51, 95, 209, 1);
    font-weight: bold;
    // position: absolute;
    // top:0px;
    // left: 0px;
    // color: #000;
    // font-size: 13px;
    // height: 30px;
    // width: 20px;
    // line-height: 20px;
    // //background:  url('@/assets/images/more.png') center center no-repeat;
    // transform: rotate(180deg);
  }
  .specialReportSingle{
    width: calc(100% - 20px);
    height: 40px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    margin-left:10px;
    margin-right:10px;
    display: flex;
    position: relative;
    .productImg{
      width: 40px;
      height: 100%;
      background-position: center 2px;
      background-repeat: no-repeat;
      background-image: url('@/assets/images/product.png');
      background-size: 50%;
    }
    .productDetail{
      width: 100%;
      height: 100%;
      >span{
        display: block;
        text-align: left;
        &:last-child{
          color: rgba(180, 180, 180, 1);
          font-size: 12px;
        }
      }
    }
    .more{
      position: absolute;
      right: 20px;
      top:0px;
      width: 20px;
      height: 100%;
      background:  url('@/assets/images/more.png') center center no-repeat;
    }
  }
}
</style>